<template>
  <div class="w-full relative bg-[#FCFCFC] overflow-hidden">
    <div>
      <van-image height="250" class="w-full" :src="Info.banner" fit="fill" />
    </div>
    <div class="mt-[20px] text-[16px] text-center font-bold">
      {{ Info.name }}
    </div>
    <div class="p-[15px]">
      <div class="mt-[10px] flex overflow-x-scroll overflow-y-hidden">
        <!-- 左 -->
        <div class="flex-[2]">
          <div
            v-for="item in Info.title"
            class="mb-[5px] min-w-[180px] h-[40px] flex items-center justify-center whitespace-nowrap px-[10px]"
            :class="
              item.active
                ? 'text-[14px] bg-[rgba(240,104,0,0.3)]'
                : ' text-[13px] bg-[rgba(239,104,0,0.1)]'
            "
          >
            {{ item.name }}
          </div>
        </div>
        <!-- 右 -->
        <div class="flex-[3] flex">
          <div class="flex-[1]" v-for="item in Info.fanan">
            <div
              v-for="rightItem in item"
              class="mb-[5px] min-w-[70px] h-[40px] flex items-center justify-center px-[10px] whitespace-nowrap"
              :class="
                rightItem.active
                  ? 'text-[14px] bg-[rgba(239,104,0,0.3)]'
                  : ' text-[13px] bg-[rgba(239,104,0,0.1)] '
              "
            >
              {{ rightItem.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex p-[15px] text-[16px] font-bold">
      <div
        v-for="(item, index) in tabsList"
        @click="clickTabs(index)"
        class="flex flex-col justify-center items-center mr-[30px]"
      >
        <div :class="{ 'text-[#8D8D8D]': !item.isActive }">{{ item.name }}</div>
        <div class="h-[2px]">
          <div v-if="item.isActive" class="mt-[5px] w-[30px] h-[2px] bg-[#EF6800]"></div>
        </div>
      </div>
    </div>
    <div v-html="vHTML" class="pb-[90px] p-[15px]"></div>
    <div class="fixed bottom-0 w-full btn">
      <div class=" ">
        <div class="w-full h-[60px] flex items-center">
          <div
            class="flex items-center justify-center px-[15px] flex-1 bg-white h-[60px]"
          >
            <div class="mr-[20px]">
              <span class="text-[#EF6800] font-bold text-[18px]">{{ Info.price }}</span
              ><span class="text-[10px]">元/起</span>
            </div>
            <div @click="share" class="flex items-center justify-center">
              <img :src="getAssetsFile('home/share.png')" class="w-[16px] h-[16px]" />
              <div class="text-[14px] text-[#636363] ml-[5px]">分享</div>
            </div>
          </div>
          <div
            @click="handleClick()"
            class="h-[60px] w-full flex justify-center items-center text-white flex-1"
            style="background: linear-gradient(180deg, #f3a140 0%, #f38e40 100%)"
          >
            立即投保
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model:show="showBottom" position="bottom" round safe-area-inset-bottom>
      <div class="px-[30px] py-[20px]">
        <div class="text-[#EF6800] text-center">温馨提示</div>
        <div
          class="mt-[15px] pb-[15px] border-b border-b-[#ECECEC] text-[#9A9A9A] text-[14px]"
        >
          本保险产品由{{ Info.brand }}承保
        </div>
        <div class="mt-[15px] text-[14px]">您即将进入投保流程：</div>
        <div class="mt-[15px] text-[14px]">
          请仔细阅读产品条款、保险须知等内容，为保障您的权益，您在销售页面的操作将会被记录并加密储存，同时页面输入的信息将仅用于投保
        </div>
        <div
          @click="insure"
          class="w-full flex justify-center items-center bg-[#F38E40] mb-[20px] h-[49px] text-white mt-[30px]"
        >
          我知道了并同意授权
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import getAssetsFile from "@/utils/getImageurl";
import { useRouter, useRoute } from "vue-router";
import { indexGetDetail } from "@/utils/api";
import { useWxShare } from "@/utils/wechatSdk";

const router = useRouter();
const route = useRoute();
const shareMemo = ref("");
const showBottom = ref(false);
const Info = ref({} as any);
const tabsList = ref([
  {
    name: "产品详情",
    isActive: true,
  },
  {
    name: "投保须知",
    isActive: false,
  },
]);
const vHTML = ref("");
const handleClick = () => {
  if (Info.value.type == 0) {
    share();
    return;
  }
  showBottom.value = true;
};
const insure = () => {
  if (route.query.id == "3") {
    router.push("/h5/insure/zj_dqyw?id=" + route.query.id + "&type=3");
  } else if (route.query.id == "1") {
    router.push("/h5/insure/zj_sxs?id=" + route.query.id + "&type=3");
  } else if (route.query.id == "7") {
    router.push("/h5/insure/zz_jgyq?id=" + route.query.id + "&type=3");
  } else if (route.query.id == "8") {
    router.push("/h5/insure/zz_gz?id=" + route.query.id + "&type=3");
  } else if (route.query.id == "19") {
    router.push("/h5/insure/dd_jgyq?id=" + route.query.id + "&type=3");
  } else if (route.query.id == "20") {
    router.push("/h5/insure/dd_ccyqx?id=" + route.query.id + "&type=3");
  } else if (route.query.id == "21") {
    router.push("/h5/insure/dd_ccyqx?id=" + route.query.id + "&type=3");
  } else if (route.query.id == "22") {
    router.push("/h5/insure/dd_gz?id=" + route.query.id + "&type=3");
  } else if (route.query.id == "23") {
    router.push("/h5/insure/dd_gz?id=" + route.query.id + "&type=3");
  } else if (route.query.id == "24") {
    router.push("/h5/insure/dd_jggzx?id=" + route.query.id + "&type=3");
  } else {
    router.push("/h5/insure?id=" + route.query.id + "&type=3");
  }
};
const getData = async () => {
  const res = await indexGetDetail({ id: route.query.id });
  Info.value = res.msg;
  vHTML.value = Info.value.detail;
  switch (route.query.id) {
    case "1":
      shareMemo.value = "短期学生意外险1-4类职业可保最高保障50万";
      break;
    case "2":
      shareMemo.value = "短期建工意外险短期投保最高保障100万";
      break;
    case "3":
      shareMemo.value = "短期公众责任险短期投保最高保障2000万";
      break;
  }
  useWxShare(
    Info.value.name,
    shareMemo.value,
    "http://nxb.xiehewanbang.com/uploads/20240305/082d6fc89a40b8413884ef1820671c86.png"
  );
};
getData();
const share = () => {
  router.push("/h5/insure/share?id=" + Info.value.id);
};
const clickTabs = (index: number) => {
  tabsList.value.forEach((it: any, i: number) => {
    if (i == index) {
      it.isActive = true;
    } else {
      it.isActive = false;
    }
  });
  if (index == 0) {
    vHTML.value = Info.value.detail;
  } else {
    vHTML.value = Info.value.notice;
  }
};
</script>
<style scoped lang="scss">
.btn {
  padding-bottom: constant(safe-area-inset-bottom);
}
</style>
